<template>
    <div>
        <vue-tinymce v-if="isshow" v-model="content"  :setting="setting" />
    </div>
</template>
<script>
export default {
    props: {
        contentText: {type: String},
        height: {type: Number},
        toolbar: {type: String},
        plugins: {type: String},
    },
    data(){
        return{
            content: '',
            isshow: true,
            setting: {}
        }
    },
    mounted(){
        let that = this;
        this.content = this.contentText;
        this.setting = {
            menubar: false,
            toolbar: "undo redo | fullscreen | formatselect alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image table | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |",
            toolbar_drawer: "sliding",
            quickbars_selection_toolbar: "removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor",
            plugins: "link image table lists fullscreen quickbars",
            language: 'zh_CN', //本地化设置
            height: this.height?this.height:350,
            branding: false,
            images_upload_handler: async (blobInfo, succFun, failFun) => {
                console.log(blobInfo)
                var formData;
                var file = blobInfo.blob();//转化为易于理解的file对象
                formData = new FormData();
                formData.append('BucketName', 'biobank')
                formData.append('Path', 'tinymce') 
                formData.append('IsCheckFolderId', false)
                formData.append('Files', file, file.name );//此处与源文档不一样
                let res = await this.$post('api/File/UploadFile',  formData);
                if(res&&res.code === 0){
                    var reader = new FileReader();
                    reader.readAsDataURL(file);  
                    reader.onload = function(){
                        succFun(reader.result)
                    }
                    
                }else{
                    failFun(res);
                }
            }
        }
        this.isshow = false;
        this.$nextTick(() => {
            this.isshow = true;
        })
    },
    methods: {
        getRichTextContent(){
            return this.content;
        },
    },
}
</script>
<style scoped lang="scss">

</style>
